<template>
  <div class="heritage-search">
    <div class="search-header">
      <h1>文化遗产搜索</h1>
      <div class="search-form">
        <el-input
          v-model="searchQuery"
          placeholder="输入关键词搜索..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">
          搜索
        </el-button>
      </div>
    </div>

    <div class="search-filters">
      <el-form :model="filters" label-width="80px">
        <el-form-item label="类型">
          <el-select v-model="filters.type" placeholder="选择类型" clearable>
            <el-option label="物质文化遗产" value="material" />
            <el-option label="非物质文化遗产" value="immaterial" />
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="filters.region" placeholder="选择地区" clearable>
            <el-option label="北京" value="beijing" />
            <el-option label="上海" value="shanghai" />
            <!-- 更多选项 -->
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="search-results">
      <el-empty v-if="!searchResults.length" description="暂无搜索结果" />
      <div v-else class="results-grid">
        <heritage-card
          v-for="item in searchResults"
          :key="item.id"
          :heritage="item"
          @click="viewDetail(item.id)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import HeritageCard from '@/components/HeritageCard.vue'

const router = useRouter()
const searchQuery = ref('')
const searchResults = ref([])

const filters = reactive({
  type: '',
  region: ''
})

const handleSearch = () => {
  // TODO: 实现搜索逻辑
  searchResults.value = []
}

const viewDetail = (id) => {
  router.push(`/heritage/${id}`)
}
</script>

<style scoped>
.heritage-search {
  padding: 20px;
}

.search-header {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.search-input {
  flex: 1;
}

.search-filters {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
</style> 